<template>
  <div class="home">
      <!-- <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

-->
    <el-container>
  <el-aside width="200px">
      
     <router-link  to="/" class="logo">
          <img src="../assets/logo.png" alt="">
     </router-link>
     
          <!-- default-active="1-1"默认选中项展开第一个选项就是文章列表 -->
          <!-- unique-opened 是否保持一个子菜单展开 -->
          <!--   router 是否使用vue-  router模式，可以跳转 相当于path -->
          
           <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="#000"
      text-color="#fff"
      active-text-color="#ffd04b"
      unique-opened
      router
:collapse="isCollapse"
      
      >
     <el-menu-item index="/">首页</el-menu-item>
      <!-- ei-submenu 展开功能 -->
      <!-- el-submenu index="2" 需要设置成唯一不重复的，不然就会有冒泡事件或者互相关联 -->
      <el-submenu index="1">
          <!-- 插槽 -->
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>文章管理</span>
        </template>
          <el-menu-item index="/home/post_list">文章列表</el-menu-item>
          <el-menu-item index="/home/post_publish">发布文章</el-menu-item>
</el-submenu>

<el-submenu index="2">
          <!-- 插槽 -->
        <template slot="title">
          <i class="el-icon-s-tools"></i>
           <span>栏目管理</span>
         
        </template>
         <el-menu-item index="2-1">栏目列表</el-menu-item>
</el-submenu>
    </el-menu>
    
    
     
      
      </el-aside>
  <el-container>
    <el-header height="80px">
      <button @click="isCollapse = !isCollapse" class="wenzi"><i class="el-icon-s-fold"></i></button>
     
        <img 
        :src="userinfo.head_img|imgUrl" 
        class="avatar"
        :size="50"
       
        >
         
        <span class="nickname">欢迎您:{{userinfo.nickname}}</span>
        <el-button type="danger">退出</el-button>
        </el-header>
     <el-main>
          <!-- 路由挂载点 -->
          <router-view></router-view>
        </el-main>
   
  </el-container>
</el-container>
  </div>
</template>

<script>
import { userDetailByIdAPI } from '../apis/user';
import { getUserId } from '../utils/localData';
export default {
    data () {
        return {
            userinfo:{},
            isCollapse:false,
            
        }
    },
    async created () {
        //获取到了id 发送请求用到
        const id = getUserId()
        console.log(id);
        //获取数据
        const res = await userDetailByIdAPI(id)
        console.log(res);
        //把数据给到自定义对象里面
this.userinfo=res.data.data
    }
  
};
</script>

<style lang="less" scoped>
.el-container {
  height: 100vh;
}
.el-header {
   .wenzi{
    position: relative;
    left: -835px;
    top: 0;
    font-size: 25px;
  }
  background-color: #333;
  color: #fff;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .nickname {
    margin: 0 10px;
  }
}
.el-aside {
  background-color: #000;
  color: #fff;
  .logo {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
  }
  .el-menu-vertical-demo{
    border-right: none;
  }
}
 
.el-main {
  background-color: #e9eef3;
  color: #333;
}
  
  
</style>